﻿@{
    Layout = "~/Views/Samples/Generic/_Index.cshtml";
    Page.IncludeWebFormsUploadClick = true;
}
@section existing_head
{
@if (ViewBag.Project.ViewEngine == ViewEngine.WebForms)
{
    @SampleHelper.RenderCode(SampleHelper.VaryByLanguage("if (uploadPanel.Visible) {", "If uploadPanel.Visible Then").ToString())
}
        @SampleHelper.RenderComponent("KrystalwareScriptRenderer")
        <script type="text/javascript">
            function onFileCountChanged(data)
            {
                var hasFiles = (kw("fileSelector").get_Files().length > 0);

                //document.getElementById("fileListTable").style.display = (hasFiles > 0 ? "" : "none");
                document.getElementById("@SampleHelper.ResolveId("uploadButton")").className = "button" + (hasFiles ? "" : " disabled");
            }

            function onBeforeSessionEnd(data)
            {
                document.getElementById("cancelButton").style.display = "none";
            }

            function startUpload()
            {
                kw("uploadConnector").start();

                document.getElementById("cancelButton").style.display = "none";
            }

            function cancelUpload()
            {
                kw("uploadConnector").cancel();

                document.getElementById("cancelButton").style.display = "none";
            }

            function clearFiles()
            {
                kw("fileSelector").clear();
            }

            function onSessionStarted(data)
            {
                document.getElementById("@SampleHelper.ResolveId("uploadButton")").style.display = "none";
                document.getElementById("clearButton").style.display = "none";
                document.getElementById("cancelButton").style.display = "block";
            }

            kw(function ()
            {
                var uploadConnector = new kw.UploadConnector(
                {
                    id: "uploadConnector",
                    uploadHandlerUrl: "@SampleHelper.ResolveContent("~/SlickUpload.axd")",
                    uploadForm: "@SampleHelper.ResolveId("uploadForm")",
                    uploadProfile: "clientApi",
                    autoUploadOnSubmit: true,
                    onBeforeSessionEnd: onBeforeSessionEnd,
                    onUploadSessionStarted: onSessionStarted
                });

                var fileSelector = new kw.FileSelector(
                {
                    id : "fileSelector",
                    folderElement : "folderSelector",
                    uploadConnector : uploadConnector,
                    onFileAdded: onFileCountChanged,
                    onFileRemoved: onFileCountChanged,
                    maxFileSize: @SampleHelper.RenderStatement(SampleHelper.VaryByLanguage("SlickUploadContext.Config.UploadProfiles[\"clientApi\"].MaxRequestLength", "SlickUploadContext.Config.UploadProfiles(\"clientApi\").MaxRequestLength").ToString()),
                    dropZone: "fileSelector_dropzone",
                    showDropZoneOnDocumentDragOver: true
                });

                var fileList = new kw.FileList(
                {
                    id : "fileList",
                    templateElement: "fileList_template",
                    fileSelector : "fileSelector"
                });

                var progressDisplay = new kw.UploadProgressDisplay(
                {
                    id:"progressDisplay",
                    uploadConnector: "uploadConnector"
                });

                @*if (kw.support.dragDrop)
		        {
                    document.getElementById("dropZone").style.display = "block";
                    document.getElementById("dropZoneInstructions").style.display = "inline";
		        }*@
            });

            kw.debug = @SampleHelper.RenderStatement("HttpContext.Current.IsDebuggingEnabled.ToString().ToLower()");
        </script>
@if (ViewBag.Project.ViewEngine == ViewEngine.WebForms)
{
    @SampleHelper.RenderCode(SampleHelper.VaryByLanguage("}", "End If").ToString(), true)
}
}

@section existing_slickupload
{
<div id="slickUpload" class="su-slickupload simple">
    <div id="fileSelector" class="su-fileselector">
        <a class="button"><span><b class="icon add"></b> Add files</span></a>
    </div>
    <div id="folderSelector" class="su-folderselector">
        <a class="button"><span><b class="icon add-folder"></b> Add folder</span></a>
    </div>
    <div id="clearButton">
        <a class="button" onclick="clearFiles()"><span><b class="icon cancel"></b> Clear files</span></a>
    </div>
    <div id="fileSelector_dropzone" class="su-dropzone">
        <div>
            Drag and drop files here.</div>
    </div>
    <div id="fileList" class="su-filelist">
        <div id="fileList_template" class="su-filelisttemplate">
            <div class="filedata">
                <span class="su-filename"></span> &ndash; <span class="su-filesize">(calculating)</span>
            </div>
            <a class="su-removecommand">[x]</a>
            <span class="su-validationmessage"></span>
        </div>
    </div>
    <div id="progressDisplay" class="su-uploadprogressdisplay">
        <div id="duringUpload">
            <div>
                Uploading <span class="su-filecount"></span> file(s), <span class="su-contentlengthtext">(calculating)</span>.
            </div>
            <div>
                Currently uploading: <span class="su-currentfilename"></span>file <span class="su-currentfileindex">
                </span>of <span class="su-filecount"></span>.
            </div>
            <div>
                Speed: <span class="su-speedtext">(calculating)</span>
            </div>
            <div>
                <span class="su-timeremainingtext">(calculating)</span>
            </div>
            <div class="progressBarContainer">
                <div class="su-progressbar">
                </div>
                <div class="progressBarText">
                    <span class="su-percentcompletetext">(calculating)</span>
                </div>
            </div>
        </div>
    </div>
</div>
}